<template>
	<panel title="History">
		
		<form-group name="Courses:">
	  		<select class="form-control" v-model="courseSelection">
	  			<option v-for="ele in courses" 
	  				:value="ele.key">
	  				{{ ele.value }}
	  			</option>
	  		</select>
		</form-group>

		<table-bootstrap :condensed="true">
			<tr slot="head">
				<th v-for="(value, key) in count">{{ key }}</th>
			</tr>
			<tr>
				<td v-for="ele in count">{{ ele }}</td>
			</tr>
		</table-bootstrap>
		
		<table-bootstrap slot="other">
			<tr slot="head">
				<th>Time</th><th>Score</th>
			</tr>
			<tr v-for="ele in scores">
				<td>{{ ele.createtime }}</td><td>{{ ele.score }}</td>
			</tr>
		</table-bootstrap>
	</panel>
</template>

<script>
	import { mapGetters, mapActions, mapState, mapMutations } from 'vuex'
	import Panel from 'components/Panel.vue'
	import FormGroup from 'components/FormGroup.vue'
	import TableBootstrap from 'components/Table.vue'

	let here = {
		computed: {
			...mapGetters('user', { 
				logged: 'logged',
			}),
			...mapState('exam', [
				'courses',
			]),
			...mapState('pages/exam/history', {				
				scores: 'hisScores',
				count: 'count'
			}),
			
			courseSelection: {
				get() {
					return this.$store.state.pages.exam.history.courseSelection;
				},
				set(value) {
					this.$store.commit('pages/exam/history/courseSelection', value);
					this.$store.dispatch('pages/exam/history/getHisScores', value);
				},
			},
		},
		components: {
			Panel, FormGroup, TableBootstrap
		},
		created() {
			if (this.courses.length > 0)
				this.courseSelection = this.courses[0].key
		}
	}

	export default here;
</script>

<style>


</style>